/**
 * @file
 * @auth jinguangguo
 * @date 2017/1/23
 */

body {
    background-color: #0d1113;
    color: #a0a6a9;
}

.module-market {
    margin-top: $height-nav;
    //border: 1px solid red;
    .ul-price{
        border-bottom: 1px solid #0D0D0D;
        border-right: 1px solid #0D0D0D;
    }
    .li-price{
        float: left;
        width: 93px;
        height: 25px;
        text-align: center;
        line-height: 25px;     
        color: #AEAEAE;
        &:nth-child(2){
            border-left:1px solid #0D0D0D;
            border-right:1px solid #0D0D0D;
        }
        &:nth-child(3){
            border-right:1px solid #0D0D0D;
        }
    }
    .price-active{
        background: #181a1c;
    }
    .layout-md {
        .module-box {
            position: relative;
            .chart-tab{
                z-index: 2;
                position: absolute;
                right: 0;
                top: 8px;
                margin-right: 24px;
                .item-link {
                    font-size: 12px;
                }

                &--hide{
                    z-index: -1;
                }
            }
        }

        .col-right {
            display: flex;
            .col-right-half {
                flex: 1;
                &:first-child {
                    background-color: #181818;//$color-bg-light;
                }
                &:last-child {
                    border-left: 2px solid $color-bg;
                    //overflow-y: auto;
                }
            }
        }
    }
    .b-unlock{
        display: flex;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding-left: 11px;
        padding-right: 11px;
        height: 43px;
        margin-top: 20px;
        border: 1px solid #fff;
        height: 170px;
        .one{
            .ll2{
                color:#656469;
                text-align: center;
                margin-top: 20px;
                margin-bottom: 20px;
            }
        }
    }
    .more-title {
        margin-top: 7px;
        margin-bottom: 7px;
    }
    .say-title{
        display: flex;
        display: -webkit-flex;
        align-items: center;
        margin-top: 20px;
        img{
            width: 18px;
            height: 14px;
            margin-right: 4px;
        }
    }
    // 底部
    .layout-ft {
        position: relative;
        .form-drop {
            position: absolute;
            left: 0;
            top: 2px;
            width: 100%;
            height: 100%;
            line-height: 100%;
            background-color: rgba(0, 0, 0, 0.75);
            z-index: 2;
            .text {
                position: absolute;
                top: 50%;
                left: 0;
                width: 100%;
                font-size: 13px;
                text-align: center;
                transform: translate(0, -50%);
            }
        }
        .left-title {
            padding: 8px 16px;
            border-bottom: 2px $color-bg solid;
        }
        .market-form {
            position: relative;
            display: flex;
            background-color: #181818;
            height: 100%;
            .form-box {
                flex: 1;
                padding: 10px 16px;
                .tom-num {
                    display: flex;
                    display: -webkit-flex;
                    justify-content: space-between;
                    border: 1px solid #fff;
                    padding-left: 11px;
                    padding-right: 11px;
                    height: 25.8px;
                    line-height: 25.8px;
                    margin-top: 20px;
                    .left {
                        color: rgb(160, 166, 169);
                    }
                    .right {
                        color: #17a21d;
                    }
                }
                .title {
                    margin-bottom: 16px;
                    .title-balance {
                        float: right;
                        color: $color-font-gray;
                        .strong {
                            color: $color-font-light;
                        }
                    }
                    .title-text {
                        color: $color-font-light;
                    }
                }
                .form {
                    .col-row {
                        position: relative;
                        display: flex;
                        margin-bottom: 4px;
                        .col-label {
                            flex: 0 0 54px;
                            width: 54px;
                            padding-top: 8px;
                            color: $color-font-gray;
                        }
                        .col-value {
                            flex: 1;
                        }
                        .col-text {
                            padding-top: 8px;
                        }
                        .input {

                            &--padding {
                                padding-right: 64px;
                            }
                        }
                        .placeholder {
                            position: absolute;
                            top: 7px;
                            right: 32px;
                            color: $color-font-gray;
                        }
                        .set-price {
                            position: absolute;
                            top: 4px;
                            right: 3px;
                            border: 1px #2d2f30 solid;
                            .price {
                                display: block;
                                box-sizing: border-box;
                                width: 21px;
                                text-align: center;
                                .icon {
                                    font-size: 12px;
                                    color: $color-font-light;
                                    &:hover {
                                        color: #6794ab;
                                    }
                                }
                            }
                            >.price-up {
                                height: 11px;
                                line-height: 11px;
                                border-bottom: 1px #2d2f30 solid;
                                border-top-right-radius: 2px;
                            }
                            >.price-down {
                                height: 11px;
                                line-height: 11px;
                                border-top: 0 none;
                                border-bottom-right-radius: 2px;
                                font-size: 18px;
                            }
                        }
                    }
                    .do {
                        margin-top: 10px;
                    }
                }
                .btn-buy {
                    background-color: $color-buy;
                    &:hover {
                        background-color: $color-buy-hover;
                    }
                }
                .btn-sell {
                    background-color: $color-sell;
                    &:hover {
                        background-color: $color-sell-hover;
                    }

                    &--disable{
                        opacity: .5;
                    }
                }
            }

        }
    }

    //.layout-body-nav {
    //    display: flex;
    //    flex-direction: column;
    //
    //    .coin-title {
    //        height: 40px;
    //        line-height: 40px;
    //        padding-bottom: 8px;
    //        color: #fff;
    //        border-bottom: 2px $color-border solid;
    //        .icon {
    //            margin-right: 4px;
    //            font-size: 32px;
    //            vertical-align: middle;
    //            color: #fff;
    //        }
    //        .text {
    //            font-size: 18px;
    //            vertical-align: middle;
    //        }
    //    }
    //
    //    .aside-box {
    //        flex-grow: 0;
    //        margin: 2px 0 2px 0;
    //        padding: 24px 48px;
    //        background-color: $color-bg-light;
    //        &:last-child{
    //            flex-grow: 1;
    //        }
    //    }
    //    .info-normal {
    //        margin: 16px 0 24px 0;
    //        text-align: center;
    //        .strong {
    //            color: #fff;
    //        }
    //    }
    //    .info-form {
    //        .form {
    //            .col-row {
    //                margin-bottom: 16px;
    //            }
    //            .do {
    //                margin-top: 24px;
    //            }
    //        }
    //    }
    //}
    //.layout-body-module {
    //    .module-box {
    //        .box-content {
    //            padding: 8px 24px;
    //        }
    //        .box-col {
    //            display: flex;
    //            .box-col-no {
    //                flex: 0 0 24px;
    //                width: 24px;
    //            }
    //            .box-col-left, .box-col-right {
    //
    //            }
    //            .box-col-left {
    //                flex: 2;
    //            }
    //            .box-col-right {
    //                flex: 1;
    //                background-color: $color-bg-light;
    //            }
    //        }
    //        .chart-tab{
    //            float: right;
    //            margin-right: 24px;
    //            .item-link {
    //                font-size: 12px;
    //            }
    //        }
    //        .chart-box{
    //            padding: 24px;
    //        }
    //    }
    //}
}

.comp-pay-dialog {
    .modal-body{
        .col-row {
            margin-bottom: 0;
            .col-label {
                padding-top: 0;
                width: 90px;
                line-height: inherit;
                color: #000;
            }
            .col-text {
                width: 204px;
                padding-top: 0;
                //color: #666d71;
                color: #000;
                text-align: left;

            }
            .col-input {
                .fn-block {
                    border-radius: 4px 0 0 4px;
                    border-right: 0;
                }
            }
            .btn-group {
                .binds {
                    border-radius: 0 4px 4px 0;
                }
            }
            &:last-child {
                margin-top: 16px;
            }
        }
        .text {
            height: 24px;
            color: #000;
        }
    }
}

@import "BuySellPan/style";
@import "LiveTrade/style";
@import "MyOrder/style";